<script lang="js" setup name="IconButton">
import { ref, computed, onMounted } from "vue";
import SvgIcon from "./SvgIcon.vue";

const emit = defineEmits(["click"]);
const props = defineProps({
	data: {
		type: Object,
		default: null
	},
	icon: {
		type: String,
		required: true,
	},
	size: {
		type: String,
		default: "4em",
	},
	color: {
		type: String,
		default: "#DCDCDC",
	},
	hoverColor: {
		type: String,
		default: "#A0A0A0",
	},
	activeColor: {
		type: String,
		default: "#808080",
	},
	text: {
		type: String,
		required: false,
	},
	tooltip: {
		type: String,
		required: false,
	},
});

const elButton = ref(null);
const pressed = ref(false);

const btnStyle = computed(() => {
	return {
		"--hover-color": props.hoverColor
	};
});

const onClicked = () => {
	emit("click", props.data);
};

onMounted(() => {

});
</script>

<template>
	<!-- :effect="$store.state.theme" -->
	<el-tooltip
		placement="bottom"
		:content="tooltip"
		:open-delay="280"
		effect="light"
		:disabled="!tooltip"
	>
		<div
			ref="elButton"
			:style="btnStyle"
			:class="['icon-button', pressed ? 'icon-button-pressed' : '']"
			@click="onClicked"
		>
			<svg-icon
				v-if="icon"
				class="svg-icon"
				:icon="icon"
				:color="props.color"
				:size="props.size"
			/>
			<div v-if="text" class="icon-text">{{ text }}</div>
		</div>
	</el-tooltip>
</template>

<style lang="scss" scoped>
@use "sass:color";
.icon-button {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	border-radius: 4px;
}
.icon-button:hover {
	background-color: v-bind("props.hoverColor");
	border-radius: 4px;
}

.icon-button:active {
	background-color: v-bind("props.activeColor");
	border-radius: 4px;
}

.icon-button-pressed {
	background-color: #f0f0f0;
	border-radius: 4px;
}

.icon-text {
	display: block;
	padding: 0 10px;
	font-size: 14px;
}

.svg-icon {
	width: 100%;
	height: 100%;
}
</style>
